<template>
	<el-dialog
		:title="title + '配置'"
		:visible.sync="addComShow"
		width="70%"
		:before-close="cancel"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
	>
		<el-form ref="form" label-width="120px" label-position="left" :model="form">
			<el-form-item label="提醒标识：" required>
				<el-cascader
					filterable
					:disabled="title === '编辑'"
					clearable
					v-model="form.remindFlag"
					:options="SignList"
					style="width:100%;"
					:props="{
						value: 'reminderKey',
						label: 'reminderName',
						children: 'nextRemindTypes',
					}"
				></el-cascader>
			</el-form-item>
			<el-form-item label="提醒类别：" required>
				<el-select v-model="form.remindCategory" @change="categoryChange" placeholder="请选择" filterable clearable style="width:100%;">
					<el-option
						v-for="item in keys.remindCategory"
						:key="item.typeCode + 'remindCategory'"
						:label="item.typeName"
						:value="item.typeCode"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="基准日期：" v-if="form.remindCategory === '2'" required>
				<el-date-picker
					v-model.trim="form.baseDate"
					:editable="false"
					value-format="yyyyMMdd"
					format="yyyyMMdd"
					type="date"
					placeholder="选择日期"
					style="width:100%"
				>
				</el-date-picker>
			</el-form-item>
			<el-form-item label="偏移时间：" required v-if="form.remindCategory === '2'">
				<el-table :data="form.deviationDateInfos" border style="width: 100%">
					<el-table-column prop="deviateDays" label="偏移日期">
						<template slot-scope="scope">
							<el-input-number v-model="scope.row.deviateDays" label="偏移日期" style="width:100%"></el-input-number>
						</template>
					</el-table-column>
					<el-table-column prop="time" label="偏移时间">
						<template slot-scope="scope">
							<el-time-picker
								arrow-control
								format="HH:mm:ss"
								v-model="scope.row.time"
								value-format="HH:mm:ss"
								:editable="false"
								placeholder="选择时间"
								style="width:100%"
							>
							</el-time-picker>
						</template>
					</el-table-column>
					<el-table-column prop="time" label="操作" width="150">
						<template slot-scope="scope">
							<el-button icon="el-icon-plus" size="medium" @click="btnClick('add')"></el-button>
							<el-button icon="el-icon-minus" size="medium" @click="btnClick('delete', scope.$index)"></el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
			<el-form-item label="提醒类型：" required>
				<el-select
					v-model="form.remindType"
					@change="remindTypeChange"
					multiple
					placeholder="请选择"
					filterable
					clearable
					style="width:100%;"
				>
					<el-option v-for="item in keys.remindType" :key="item.typeCode + 'remindType'" :label="item.typeName" :value="item.typeCode">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="发送人级别：" required v-if="form.remindType.includes('1')">
				<el-select v-model="form.remindClassId" placeholder="请选择" filterable clearable style="width:100%;">
					<el-option
						v-for="item in SenderList"
						:key="item.classificationId + 'remindClassId'"
						:label="item.classificationName"
						:value="item.classificationId"
					>
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="邮件标题：" :required="form.remindType.includes('1')" v-if="form.remindType.includes('1')">
				<el-input v-model.trim="form.emailSubject"></el-input>
			</el-form-item>
			<el-form-item label="邮件内容：" :required="form.remindType.includes('1')" v-if="form.remindType.includes('1')">
				<Tinymce ref="emailContent" v-model="form.emailContent" :height="300" style="100%" id="emailContent" />
			</el-form-item>
			<el-form-item label="收件人群组：" v-if="form.remindType.includes('1')">
				<el-select v-model="form.receiverGroupId" placeholder="请选择" filterable clearable style="width:100%;">
					<el-option
						v-for="item in emailList"
						:key="item.receiverGroupId + 'receiverGroupId'"
						:label="item.receiverGroupName"
						:value="item.receiverGroupId"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="其他收件人：" v-if="form.remindType.includes('1')">
				<el-input v-model.trim="form.otherReceiver" @input="invalidSymbol('otherReceiver')"></el-input>
			</el-form-item>
			<el-form-item label="抄送人群组：" v-if="form.remindType.includes('1')">
				<el-select v-model="form.ccsGroupId" placeholder="请选择" filterable clearable style="width:100%;">
					<el-option
						v-for="item in emailList"
						:key="item.receiverGroupId + 'ccsGroupId'"
						:label="item.receiverGroupName"
						:value="item.receiverGroupId"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="其他抄送人：" v-if="form.remindType.includes('1')">
				<el-input v-model.trim="form.otherCcs" @input="invalidSymbol('otherCcs')"></el-input>
			</el-form-item>
			<el-form-item label="密送人群组：" v-if="form.remindType.includes('1')">
				<el-select v-model="form.msGroupId" placeholder="请选择" filterable clearable style="width:100%;">
					<el-option
						v-for="item in emailList"
						:key="item.receiverGroupId + 'msGroupId'"
						:label="item.receiverGroupName"
						:value="item.receiverGroupId"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="其他密送人：" v-if="form.remindType.includes('1')">
				<el-input v-model.trim="form.otherMs" @input="invalidSymbol('otherMs')"></el-input>
			</el-form-item>
			<el-form-item label="短信内容：" required v-if="form.remindType.includes('2')">
				<Tinymce ref="messageContent" v-model="form.messageContent" :height="300" style="100%" id="messageContent" />
			</el-form-item>
			<el-form-item label="短信收件人：" required v-if="form.remindType.includes('2')">
				<el-input v-model.trim="form.messageAddressee"></el-input>
			</el-form-item>
			<el-form-item label="备注：">
				<Tinymce ref="remark" v-model="form.remark" :height="300" style="100%" id="remark" />
			</el-form-item>
		</el-form>

		<span slot="footer" class="dialog-footer">
			<el-button size="small" @click="cancel" :disabled="btnLoading">取 消</el-button>
			<el-button size="small" type="primary" @click="addConfirm" :disabled="btnLoading" :loading="btnLoading">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
	import { ReminderSave } from '@/api/Reminder/index.js'
	import Tinymce from '@/components/Tinymce'
	import { jsonArray } from '@/api/productApi/file'
	export default {
		components: {
			Tinymce
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			addComShow: {
				type: Boolean,
				default: false
			},
			comIsShow: {
				type: Function,
				default: Function
			},
			queryFundManagerList: {
				type: Function,
				default: Function
			},
			keys: {
				type: Object,
				default: Object
			},
			emailList: {
				type: Array,
				default: Array
			},
			SignList: {
				type: Array,
				default: Array
			},
			SenderList: {
				type: Array,
				default: Array
			}
		},
		data() {
			return {
				form: {
					remindType: [],
					remindFlag: [],
					deviationDateInfos: [],
					remindCategory: '',
					remindClassId: '',
					baseDate: '',
					emailSubject: '',
					emailContent: '',
					receiverGroupId: '',
					otherReceiver: '',
					ccsGroupId: '',
					otherCcs: '',
					messageContent: '',
					messageAddressee: '',
					subscribeId: '',
					remark: ''
				},
				btnLoading: false,
				legalCharacters: ['.', '{', '}', ';', '@', ...'1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm-_$']
			}
		},

		methods: {
			invalidSymbol(property) {
				if (this.form[property]) {
					const yesList = []
					const valueList = [...this.form[property]]
					valueList.forEach(item => {
						if (this.legalCharacters.includes(item)) {
							yesList.push(item)
						}
					})
					this.form[property] = yesList.join('')
				}
			},

			remindTypeChange() {
				if (!this.form.remindType.length) {
					this.form.receiverGroupId = ''
					this.form.otherReceiver = ''
					this.form.emailSubject = ''
					this.form.emailContent = ''
					this.form.messageContent = ''
					this.form.messageAddressee = ''
				} else if (!this.form.remindType.includes('1')) {
					this.form.receiverGroupId = ''
					this.form.otherReceiver = ''
					this.form.emailSubject = ''
					this.form.emailContent = ''
					if (
						document.getElementById('emailContent_ifr') &&
						document.getElementById('emailContent_ifr').contentWindow &&
						document.getElementById('emailContent_ifr').contentWindow.document.getElementById('tinymce')
					) {
						document.getElementById('emailContent_ifr').contentWindow.document.getElementById('tinymce').innerHTML = '<p><br></p>'
					}
				} else if (!this.form.remindType.includes('2')) {
					this.form.messageContent = ''
					this.form.messageAddressee = ''
					if (
						document.getElementById('messageContent_ifr') &&
						document.getElementById('messageContent_ifr').contentWindow &&
						document.getElementById('messageContent_ifr').contentWindow.document.getElementById('tinymce')
					) {
						document.getElementById('messageContent_ifr').contentWindow.document.getElementById('tinymce').innerHTML = '<p><br></p>'
					}
				}
			},

			btnClick(type, key) {
				if (type === 'add') {
					this.form.deviationDateInfos.push({ time: '', deviateDays: '' })
				} else {
					if (this.form.deviationDateInfos.length > 1) {
						this.form.deviationDateInfos = this.form.deviationDateInfos.filter((item, index) => index !== key)
					}
				}
			},

			categoryChange() {
				if (this.form.remindCategory === '2') {
					this.form.deviationDateInfos = [{ time: '', deviateDays: '' }]
				} else {
					this.form.deviationDateInfos = []
				}
			},

			cancel() {
				if (
					document.getElementById('emailContent_ifr') &&
					document.getElementById('emailContent_ifr').contentWindow &&
					document.getElementById('emailContent_ifr').contentWindow.document.getElementById('tinymce')
				) {
					document.getElementById('emailContent_ifr').contentWindow.document.getElementById('tinymce').innerHTML = '<p><br></p>'
				}
				if (
					document.getElementById('messageContent_ifr') &&
					document.getElementById('messageContent_ifr').contentWindow &&
					document.getElementById('messageContent_ifr').contentWindow.document.getElementById('tinymce')
				) {
					document.getElementById('messageContent_ifr').contentWindow.document.getElementById('tinymce').innerHTML = '<p><br></p>'
				}
				if (
					document.getElementById('remark_ifr') &&
					document.getElementById('remark_ifr').contentWindow &&
					document.getElementById('remark_ifr').contentWindow.document.getElementById('tinymce')
				) {
					document.getElementById('remark_ifr').contentWindow.document.getElementById('tinymce').innerHTML = '<p><br></p>'
				}
				this.$emit('comIsShow')
				this.form = {
					remindType: [],
					remindFlag: [],
					deviationDateInfos: [],
					remindCategory: '',
					remindClassId: '',
					baseDate: '',
					emailSubject: '',
					emailContent: '',
					receiverGroupId: '',
					otherReceiver: '',
					ccsGroupId: '',
					otherCcs: '',
					messageContent: '',
					messageAddressee: '',
					subscribeId: '',
					remark: ''
				}
			},

			// 新增或编辑
			addConfirm() {
				if (!this.form.remindFlag.length) {
					this.$message({ type: 'error', message: '请选择提醒标识' })
					return
				}
				if (!this.form.remindType.length) {
					this.$message({ type: 'error', message: '请选择提醒类型' })
					return
				}
				if (!this.form.remindCategory) {
					this.$message({ type: 'error', message: '请选择提醒类别' })
					return
				}
				if (this.form.remindCategory === '2') {
					if (!this.form.baseDate) {
						this.$message({ type: 'error', message: '请填写基准日期' })
						return
					}
					for (let index = 0; index < this.form.deviationDateInfos.length; index++) {
						const element = this.form.deviationDateInfos[index]
						if (!`${element.deviateDays}`) {
							this.$message({ type: 'error', message: '请填写偏移时间列表偏移日期' })
							return
						}
						if (!element.time) {
							this.$message({ type: 'error', message: '请填写偏移时间列表偏移时间' })
							return
						}
					}
				}
				if (this.form.remindType.includes('1')) {
					if (!this.form.remindClassId) {
						this.$message({ type: 'error', message: '请选择发送人级别' })
						return
					}
					if (!this.form.emailSubject) {
						this.$message({ type: 'error', message: '请填写邮件标题' })
						return
					}
					if (!this.form.emailContent.trim()) {
						this.$message({ type: 'error', message: '请填写邮件内容' })
						return
					}
					if (!this.form.receiverGroupId && !this.form.otherReceiver) {
						this.$message({ type: 'error', message: '请填写收件人或收件人群组' })
						return
					}
				}
				if (this.form.remindType.includes('2')) {
					if (!this.form.messageContent.trim()) {
						this.$message({ type: 'error', message: '请填写短信内容' })
						return
					}
					if (!this.form.messageAddressee) {
						this.$message({ type: 'error', message: '请填写短信收件人' })
						return
					}
				}
				const obj = jsonArray(this.form)
				const remindType = jsonArray(this.form.remindType)
				const remindFlag = jsonArray(this.form.remindFlag)
				obj.remindType = remindType.join(';')
				obj.remindFlag = remindFlag.join(':')
				this.btnLoading = true
				ReminderSave(obj)
					.then(res => {
						if (res.msgCode === 'Y') {
							this.$message({
								showClose: true,
								message: '添加成功',
								customClass: 'el-messageClass',
								type: 'success'
							})
							this.$emit('queryFundManagerList')
							this.cancel()
						}
					})
					.finally(() => {
						this.btnLoading = false
					})
			},

			edit(obj) {
				const data = jsonArray(obj)
				const remindType = jsonArray(obj.remindType)
				const remindFlag = jsonArray(obj.remindFlag)
				data.remindType = remindType.split(';')
				data.remindFlag = remindFlag.split(':')
				this.form = data
				setTimeout(() => {
					this.$nextTick(() => {
						if (
							document.getElementById('emailContent_ifr') &&
							document.getElementById('emailContent_ifr').contentWindow &&
							document.getElementById('emailContent_ifr').contentWindow.document.getElementById('tinymce')
						) {
							document.getElementById('emailContent_ifr').contentWindow.document.getElementById('tinymce').innerHTML = data.emailContent
						}
						if (
							document.getElementById('messageContent_ifr') &&
							document.getElementById('messageContent_ifr').contentWindow &&
							document.getElementById('messageContent_ifr').contentWindow.document.getElementById('tinymce')
						) {
							document.getElementById('messageContent_ifr').contentWindow.document.getElementById('tinymce').innerHTML = data.messageContent
						}
						if (
							document.getElementById('remark_ifr') &&
							document.getElementById('remark_ifr').contentWindow &&
							document.getElementById('remark_ifr').contentWindow.document.getElementById('tinymce')
						) {
							document.getElementById('remark_ifr').contentWindow.document.getElementById('tinymce').innerHTML = data.remark
						}
					})
				})
			}
		}
	}
</script>
<style lang="scss" scoped >
	::v-deep .editor-custom-btn-container {
		display: none;
	}
	::v-deep th {
		padding: 0px 0 !important;
	}
</style>
